<!--远程会诊药店订单查询-->
<template>
  <div class="detail">
    <div class="detail-item">
      <p class="detail-item-tle">患者信息</p>
      <div class="detail-item-com">
        <p>患者姓名：{{ dates.memberName }}</p>
        <p>患者性别：{{ dates.gender === 1 ? '男' : dates.gender === 2?'女':'其他' }}</p>
        <p>出生日期：{{ dates.birth }}</p>
        <p>所属民族：{{ folk }}</p>
        <p>证件类型：{{ dates.idcardType | creatfom }}</p>
        <p>证件号码：{{ dates.idcard }}</p>
        <p>医保类型：{{ dates.insuranceType | format }}</p>
        <p>医保卡号：{{ dates.insuranceNumber }}</p>
        <p>患者年龄：{{ dates.age + '岁' }}</p>
        <p>联系电话：{{ dates.phoneNumber }}</p>
        <p>患者籍贯：{{ dates.nativePlace }}</p>
        <p>患者身高：{{ dates.height }}</p>
        <p>患者体重：{{ dates.weight }}</p>
        <p>工作单位：{{ dates.workUnit }}</p>
        <p>家庭住址：{{ dates.homeAddress }}</p>
      </div>
    </div>
    <div class="detail-item">
      <p class="detail-item-tle">病历信息</p>
      <div class="detail-item-com">
        <p>主       诉：{{ dates.mainsuit }}</p>
        <p>临床诊断：{{ dates.assessmentcontent }}</p>
        <p>会诊目的：{{ dates.conGoal }}</p>
        <div>
          <p>病例资料：</p>
          <div class="img-bor" v-show="images.length > 0 && images[0].fileName">
            <div style="width: 227px;height: 268px;border: 1px solid rgba(0,0,0,.2);box-shadow: 0 0 10px 0 rgba(0,0,0,.2);margin: 15px" v-for="item in images" :key="item.size">
              <img style="display: block;width: 220px;height: 260px;margin: auto;margin-top: 3px" :src="fileBaseUrl + item.fileName" @click="handleimgModel(item)">
            </div>
          </div>
        </div>
        <div>
          <p>影像资料：</p>
          <div class="img-bor" v-show="imgData.length > 0 && imgData[0].fileName">
            <div style="width: 227px;height: 268px;border: 1px solid rgba(0,0,0,.2);box-shadow: 0 0 10px 0 rgba(0,0,0,.2);margin: 15px" v-for="item in imgData" :key="item.size">
              <img style="display: block;width: 220px;height: 260px;margin: auto;margin-top: 3px" :src="fileBaseUrl + item.fileName" @click="handleimgModel(item)">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="detail-item">
      <p class="detail-item-tle">申请信息</p>
      <div class="detail-item-com">
        <p>会诊类型：{{ dates.conMold | firtstar }}</p>
        <p>会诊方式：{{ dates.conWay === 0 ? '视频' : '非视频' }}</p>
        <p>会诊模式： {{ dates.conMode === 0 ? '单方' : '多方' }}</p>
        <p>平急诊： {{ dates.conType ? '平诊' : '急诊' }}</p>
        <p>所属学科：{{ dates.subjectName }}</p>
        <p>期望医生：{{ dates.expectDoctorName }}</p>
        <p>期望会诊时间：{{ dates.expectTime }}</p>
        <p>申请机构：{{ dates.applyHospitalName }}</p>
        <p>申请科室：{{ dates.applyDeptName }}</p>
        <p>申请医生：{{ dates.applyDoctorName }}</p>
        <p>联系电话：{{ dates.applyDoctorPhone }}</p>
      </div>
    </div>
    <div class="detail-item" v-show="dates.conStatus > 4">
      <p class="detail-item-tle">会诊信息</p>
      <div class="detail-item-com">
        <p>会诊医生：{{ dates.doctorName }}</p>
        <p>会诊时间：{{ dates.conTime }}</p>
        <p>诊断描述：{{ dates.assessmentDesc }}</p>
        <p>治疗意见：{{ dates.handlingOpinions }}</p>
        <p>报告医生：{{ dates.reportDoctorName }}</p>
      </div>
    </div>
    <div class="detail-item" v-show="dates.conStatus === 9">
      <p class="detail-item-tle">会诊报告</p>
      <div class="detail-item-lis" style="width: 96%;height: 62px;line-height: 62px;margin: auto;display: flex;flex-direction: row">
        <p style="width: 25%">报告时间：{{ dates.reportTime }}</p>
        <button type="info" style="width: 100px;height: 32px;line-height: 0;margin-top: 15px" @click="handleMaskshow">显示报告</button>
      </div>
    </div>
    <div class="detail-item">
      <p class="detail-item-tle">退费信息</p>
      <Row>
        <Col :xs="1">&nbsp;</Col>
        <Col :xs="23">
          <Row style="padding-bottom: 10px;padding-top: 10px">
            <Col :xs="8">
              退费状态：
              <span>{{['申请中', '已退款', '拒绝退款', '退款中', '同意退款'][dates.refundOrderStatus]}}</span>
            </Col>
            <Col :xs="8">退款金额：
              <span>{{dates.refundAmt}}</span>
            </Col>
            <Col :xs="8" v-if="dates.refundAuditorTime">审核时间：
              <span>{{dates.refundAuditorTime}}</span>
            </Col>
          </Row>
          <Row style="padding-bottom: 10px;padding-top: 10px">
            <Col :xs="24" v-if="dates.refundReason">
              申请退款原因：
              <span>{{dates.refundReason}}</span>
            </Col>
          </Row>
          <Row style="padding-bottom: 10px;padding-top: 10px">
            <Col :xs="24" v-if="dates.refundAuditorReason">
              拒绝原因：
              <span>{{dates.refundAuditorReason}}</span>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
    <div style="width: 100%;height: 35px;text-align: center">
      <feeBackBtn :id="$route.params.id" :feeBackInfo="{
        refundAmt: dates.refundAmt,
        refundTradingChannels: dates.refundTradingChannels,
        refundOrderStatus: dates.refundOrderStatus}" />
      <Button type="primary" @click="handleGOback">返回</Button>
    </div>
    <!--  图片放大  -->
    <Modal v-model="modal1" title="查看大图" footer-hide>
      <img :src="imgurl"  style="width: 100%">
    </Modal>
    <Modal v-model="maskcode" title="会诊报告" width="600px">
      <div class="maskdeo">
        <div class="maskdeo-itema">
          <p>患者姓名: {{ dates.memberName }}</p>
          <p>患者性别: {{ dates.gender === 1 ? '男' : dates.gender ===2?'女':'其他' }}</p>
          <p>出生日期: {{ dates.birth }}</p>
        </div>
        <div class="maskdeo-itema">
          <p>证件类型: {{ dates.idcardType | creatfom }}</p>
          <p style="width: 67%">证件号码: {{ dates.idcard }}</p>
        </div>
        <div class="maskdeo-itema">
          <p>申请科室: {{ dates.applyDeptName }}</p>
          <p>会诊类型: {{ dates.conMold | firtstar }}</p>
          <p>会诊方式: {{ dates.conWay === 0 ? '视频' : '非视频' }}</p>
        </div>
        <div class="maskdeo-itemb">
          <p style="margin-top: 15px">诊断描述:</p>
          <p>{{ dates.assessmentDesc }}</p>
        </div>
        <div class="maskdeo-itemb">
          <p style="margin-top: 15px">治疗意见:</p>
          <p>{{ dates.handlingOpinions }}</p>
        </div>
      </div>
      <div slot="footer">
        <Button type="primary" @click="handleMaskshow">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import api from "@/api/commonApi";
import feeBackBtn from './components/feeBackBtn';
export default {
  name: 'detail',
  components: {
    feeBackBtn
  },
  data() {
    return {
      modal1: false,
      maskcode: false,
      dates: {},
      images: [],
      imgData: [],
      folk: '',
      imgurl: '',
      statusand: null
    }
  },
  mounted() {
    let reqBody = {
      id: this.$route.query.id
    }
    this.$axios.post(api.showDetailByRefundId, reqBody).then(res => {
      if (res.data.code === 1) {
        this.dates = res.data.object
        if (this.dates.caseImages) {
          this.images = JSON.parse(this.dates.caseImages)
        }
        if (this.dates.caseImages) {
          this.imgData = JSON.parse(this.dates.imgData)
        }
        this.gethomecode()
      }
    });
  },
  methods: {
    handleMaskshow() {
      // 显示报告的弹框显示和隐藏
      this.maskcode = !this.maskcode
    },
    gethomecode() {
      if (this.dates.nation) {
        this.$axios.post(api.findDoctorDict).then(resp => {
          if (resp.data.code === 1) {
            const resObj = resp.data.object.nationalityList;
            resObj.filter(item => {
              if (item.dictType.indexOf(this.dates.nation) !== -1) {
                this.folk = item.dictName
              }
            })
          } else {
            this.$Message.error(resp.data.message);
          }
        })
      } else {
        this.folk = '暂无患者民族信息'
      }
    },
    handleimgModel(items) {
      // 点击图片放大
      this.imgurl = this.fileBaseUrl + items.fileName
      this.modal1 = true
    },
    handleGOback() {
      // 返回
      this.$router.back()
    }
  },
  filters: {
    creatfom(val) {
      switch (parseInt(val)) {
        case 1:
          return "居民身份证"
        case 2:
          return "居民户口簿"
        case 3:
          return "护照"
        case 4:
          return "军官证"
        case 5:
          return "驾驶证"
        case 6:
          return "港澳居民通行证"
        case 7:
          return "台湾居民通行证"
        case 8:
          return "其他法定有效证件"
      }
    },
    firtstar(val) {
      switch (parseInt(val)) {
        case 1:
          return '临床会诊'
        case 2:
          return '影像诊断'
        case 3:
          return '心电诊断'
        case 4:
          return '病理诊断'
        case 5:
          return '远程示教'
        case 6:
          return '精准医疗'
        case 7:
          return '卒中急救'
        case 8:
          return '病理讨论'
        case 9:
          return '护理会诊'
        case 10:
          return '远程门诊'
        case 11:
          return '检验诊断'
      }
    },
    format(val) {
      switch (parseInt(val)) {
        case 1:
          return '城镇职工基本医疗保险'
        case 2:
          return '新型农村合作医疗'
        case 3:
          return '城镇居民基本医疗保险'
        case 4:
          return '离休干部医疗保险'
        case 5:
          return '自费'
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .detail{
    width: 98%;
    margin: auto;
    .detail-item{
      width: 100%;
      min-height: 100px;
      border: 1px solid #dddddd;
      border-radius: 6px;
      margin-bottom: 20px;
      background-color: white;
      .detail-item-tle{
        width: 100%;
        margin: auto;
        height: 35px;
        line-height: 35px;
        text-indent: 15px;
        color: #242526;
        background-color: #f5f5f5;
        border-color: #ddd;
        font-size: 13px;
        border-radius: 6px 6px 0 0;
      }
      .detail-item-com{
        width: 96%;
        margin: auto;
        font-size: 13px;
        color: #676a6c;
        padding: 10px 0;
        line-height: 18px;
        .img-bor{
          width: 100%;
          border: 1px solid #ddd;
          display: flex;
          flex-flow: row wrap;
          justify-content: flex-start;
        }
      }
    }
  }
  .maskdeo-itema{
    width: 100%;
    height: 60px;
    line-height: 60px;
    display: flex;
    flex-flow: row wrap;
    color: #676a6c;
    font-size: 13px;
    justify-content: space-between;
    border-bottom: 1px solid #EAEAEA;
  }
  .maskdeo-itema p{
    width: 33%;
    height: 60px;
  }
  .maskdeo-itemb{
    width: 100%;
    height: 60px;
    font-size: 13px;
    color: #676a6c;
    border-bottom: 1px solid #EAEAEA;
  }
  .maskdeo-itemb p{
    width: 100%;
    height: 22px;
    line-height: 22px;
  }
</style>
